<template>
    <div class="order">
        <el-form ref="searchFormRef" :rules="rules" :model="list">
            <el-form-item label="秒杀订单超过:" label-width="120px" prop="flashOrderOvertime">
                <el-input v-model="list.flashOrderOvertime">
                    <template #append>分</template>
                </el-input>
                <span>未付款，订单自动关闭</span>
            </el-form-item>
            <el-form-item label="正常订单超过:" label-width="120px" prop="normalOrderOvertime">
                <el-input v-model="list.normalOrderOvertime">
                    <template #append>分</template>
                </el-input>
                <span>未付款，订单自动关闭</span>
            </el-form-item>
            <el-form-item label="发货超过:" label-width="120px" prop="confirmOvertime">
                <el-input v-model="list.confirmOvertime">
                    <template #append>天</template>
                </el-input>
                <span>未收货，订单自动完成</span>
            </el-form-item>
            <el-form-item label="订单完成超过:" label-width="120px" prop="finishOvertime">
                <el-input v-model="list.finishOvertime">
                    <template #append>天</template>
                </el-input>
                <span>自动结束交易，不能申请售后</span>
            </el-form-item>
            <el-form-item label="订单完成超过:" label-width="120px" prop="commentOvertime">
                <el-input v-model="list.commentOvertime">
                    <template #append>天</template>
                </el-input>
                <span>自动五星好评</span>
            </el-form-item>
            <el-button type="primary" @click="submitForm(searchFormRef)">提交</el-button>
        </el-form>
    </div>

</template>

<script setup lang='ts'>
import { ref, reactive, toRefs } from 'vue'
import { ElMessage, ElMessageBox, FormInstance } from "element-plus"
import { user } from "@/api"

// 创建表单实例
const searchFormRef = ref<FormInstance>()


interface IState {
    list: IOrderSettingParams
}

const state = reactive<IState>({
    list: {
        commentOvertime: 0,
        confirmOvertime: 0,
        finishOvertime: 0,
        flashOrderOvertime: 0,
        id: 1,
        normalOrderOvertime: 0
    }

})


// 输入框校验
const rules = reactive({
    normalOrderOvertime: [{ required: true, message: "时间不能为空", trigger: 'blur' }],
    flashOrderOvertime: [{ required: true, message: "时间不能为空", trigger: 'blur' }],
    finishOvertime: [{ required: true, message: "时间不能为空", trigger: 'blur' }],
    confirmOvertime: [{ required: true, message: "时间不能为空", trigger: 'blur' }],
    commentOvertime: [{ required: true, message: "时间不能为空", trigger: 'blur' }],
})

const orderSetting = () => {
    user.getOrderSettingApi(state.list.id).then((res) => {
        state.list = res.data
    })
}
orderSetting()


// 提交按钮
const submitForm = (searchFormRef: FormInstance | undefined) => {
    if (!searchFormRef) return
    searchFormRef.validate((valid: any) => {
        if (valid) {
            ElMessageBox.confirm("确定要进行保存吗？").then(() => {
                user.getOrderSettingUpdateApi({ id: 1, orderSetting: state.list }).then((res) => {
                    if (res.code == 200) {
                        ElMessage.success("修改成功!")
                    }
                })
            }).catch(() => {

            })
        } else {
            ElMessage.error('提交参数不合法')
            return false
        }
    })
}

let { list } = toRefs(state)

</script>

<style lang="less" scoped>
.order {
    width: 800px;
    border: 2px solid #f1f3f8;
    margin: 50px auto;

    .el-form {
        width: 580px;
        margin: 20px auto;
        text-align: center;

        .el-form-item {
            display: flex;

            .el-input {
                width: 250px;
                height: 40px;
                margin-right: 10px;
            }
        }
    }


}
</style>